<template>
    <div>
     <div class="caidanming"><strong>供应商管理 /</strong>供应商列表</div>  
      <div class="title">供应商信息</div>
        <!-- 我是诊所信息页面 -->
      <div>
        <el-button type="primary" size="mini" @click="clinicOpen">
              <i class="el-icon-plus"></i>
              添加供应商
        </el-button>
      </div> 
      <!-- 主体表格部分 -->
      <div style="margin-top:20px">
          <el-row>
                <!-- 主体表格部分 -->
                <template>
                    <el-table
                    :data="roleTable"
                    border
                    fit
                    style="width: 100%">
                     <el-table-column
                        type="selection"
                        width="55">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="序号" 
                        type="index"
                        width="90"
                        align="center">
                    </el-table-column>
                    <el-table-column
                        prop="distributor_name"
                        label="供应商名称"
                        width="180"
                        align="center"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="distributor_principal"
                        label="供应商负责人"
                        width="140"
                        align="center">
                    </el-table-column>
                    <el-table-column
                        prop="distributor_phone"
                        label="负责人联系电话"
                        width="134" align="center">
                    </el-table-column>
                    <el-table-column
                        prop="distributor_map"
                        label="供应商地址" align="center"
                        width="160">
                    </el-table-column>
        
                    <el-table-column
                        prop="admin_state"
                        label="状态" align="center">
                        <!-- template slot-scope="scope" scope.row这三个属性可以获取当前表格的一整行数据-->
                        <template slot-scope="scope" >
                            <!-- {{scope.row.admin_state===0?'启用':'停用'}} -->
                            <span v-if="scope.row.distributor_state===1" style="color:red;font-weight: 500;
        font-size: 14px;">停用</span>
                            <span v-if="scope.row.distributor_state===0" style="color:green;font-weight: 500;
        font-size: 14px;">启用</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        label="操作"
                        width='360' align="center">
                        <template slot-scope="scope">
                            <el-button
                            size="mini"
                            @click="updateDistributor1(scope.row.distributor_id)">编辑</el-button>
                            <el-button
                                size="mini"
                                type="danger"
                                @click="deleteAdmin(scope.row)">删除
                            </el-button>
                             
                            <el-button size="mini" @click="stateClick(scope.row)" type="warning">
                                {{scope.row.distributor_state===0?'停用':'启用'}}
                            </el-button>
                            <el-button size="mini" @click="bindingClinic(scope.row.distributor_id)" style=" display: show;"
                                type="success"
                                >
                                查看详情
                            </el-button>
                            
                        </template>
                    </el-table-column>
                    </el-table>
                </template>
            </el-row>
      </div>

      <!-- 添加用户模态框 -->
            <div>
                <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="60%">
                    <el-form :model="addRoleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm" label-suffix=":">
                        <el-form-item label="用户账号" prop="name">
                            <el-input v-model="addRoleForm.admin_name"></el-input>
                        </el-form-item>
                        <el-form-item label="用户密码" prop="name">
                            <el-input type="password" v-model="addRoleForm.admin_pwd"></el-input>
                        </el-form-item>

                        <el-form-item label="分配角色" prop="name">
                            <template>
                                <el-select v-model="addRoleForm.role_id" clearable placeholder="请选择">
                                    <el-option
                                    v-for="item in roles"
                                    :key="item.role_id"
                                    :label="item.role_supper_admin"
                                    :value="item.role_id">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-form-item>
                        <el-form-item label="所属县区" >
                            <template>
                                <el-select v-model="addRoleForm.area_code" @change="reginById" clearable placeholder="请选择">
                                    <el-option
                                    v-for="item in regin"
                                    :key="item.cid"
                                    :label="item.region_name"
                                    :value="item.region_id">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-form-item>

                        <el-form-item label="供应商名称" prop="name">
                            <el-input  v-model="addRoleForm.distributor_name"></el-input>
                        </el-form-item>
                        <el-form-item label="供应商负责人" prop="name">
                            <el-input  v-model="addRoleForm.distributor_principal"></el-input>
                        </el-form-item>
                         <el-form-item label="负责人电话" prop="name">
                            <el-input  v-model="addRoleForm.distributor_phone"></el-input>
                        </el-form-item>

                         <el-form-item label="法人代表" prop="name">
                            <el-input  v-model="addRoleForm.distributor_legal_person"></el-input>
                        </el-form-item>

                         <el-form-item label="法人电话" prop="name">
                            <el-input  v-model="addRoleForm.distributor_legal_phone"></el-input>
                        </el-form-item>

                         <el-form-item label="供应商地址" prop="name">
                            <el-input  v-model="addRoleForm.distributor_map"></el-input>
                        </el-form-item>

                         <el-form-item label="资质证明" prop="name">
                             <el-upload
                                class="upload-demo"
                                action="G:/image"
    
                                multiple
                                :limit="3"
                                
                                :file-list="fileList">
                                <el-button size="small" type="primary" >上传资质证明</el-button>
                                <span slot="tip" class="el-upload__tip" style="color:red;margin-left:20px">只能上传jpg/png文件，且不超过500kb</span>
                            </el-upload> 
                        </el-form-item>

                        <el-form-item label="备注">
                            <el-input type="textarea" v-model="addRoleForm.admin_remark_column"/>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible">取 消</el-button>
                        <el-button type="primary" @click="insertAdmin">确 定</el-button>
                    </span>
                </el-dialog>
                <!-- 关联诊所弹出模态框 -->
                <el-dialog
                    title="提示"
                    :visible.sync="clinicVisible"
                    width="60%"
                    >
                <template>
                    <template>
                    <el-table
                    :data="roleTable1"
                    border
                    fit
                    style="width: 100%"
                    >
                     <el-table-column
                        type="selection"
                        width="55">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="序号" 
                        type="index"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="community_hospitals_number"
                        label="诊所编号"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="community_hospitals_name"
                        label="诊所名称"
                        width="163">
                    </el-table-column>
                    <el-table-column
                        prop="community_hospitals_principal"
                        label="负责人">
                    </el-table-column>
                    <el-table-column
                        prop="community_hospitals_map"
                        label="诊所地址"
                        width="204">
                    </el-table-column>

                   
                    
                    <el-table-column
                        prop="community_hospitals_state"
                        label="状态">
                        <!-- template slot-scope="scope" scope.row这三个属性可以获取当前表格的一整行数据-->
                        <template slot-scope="scope" >
                            <!-- {{scope.row.admin_state===0?'启用':'停用'}} -->
                            <span v-if="scope.row.community_hospitals_state===1" style="color:red;font-weight: 500;
        font-size: 14px;">停用</span>
                            <span v-if="scope.row.community_hospitals_state===0" style="color:green;font-weight: 500;
        font-size: 14px;">启用</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        label="操作"
                        width='120'>
                        <template slot-scope="scope">
                            <el-button
                            size="mini"
                            v-if="scope.row.community_hospitals_state===0"
                            @click="guanlian(scope.row)">关联</el-button>
                        </template>
                    </el-table-column>
                    </el-table>
                </template>
                </template>
                </el-dialog>
                <!-- 查看详情 -->
                <div>
                        <el-dialog
                            title="提示"
                            :visible.sync="xiangqing"
                                width="60%">
                                <el-form :model="xiangqingForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm" label-suffix=":">
                                    <el-form-item label="供应商名称" prop="name">
                                        <el-input  v-model="xiangqingForm.distributor_name" ></el-input>
                                    </el-form-item>
                                    <el-form-item label="供应商负责人" prop="name">
                                        <el-input  v-model="xiangqingForm.distributor_principal"></el-input>
                                    </el-form-item>
                                    <el-form-item label="负责人电话" prop="name">
                                        <el-input  v-model="xiangqingForm.distributor_phone"></el-input>
                                    </el-form-item>

                                    <el-form-item label="法人代表" prop="name">
                                        <el-input  v-model="xiangqingForm.distributor_legal_person"></el-input>
                                    </el-form-item>

                                    <el-form-item label="法人电话" prop="name">
                                        <el-input  v-model="xiangqingForm.distributor_legal_phone"></el-input>
                                    </el-form-item>

                                    <el-form-item label="供应商地址" prop="name">
                                        <el-input  v-model="xiangqingForm.distributor_map"></el-input>
                                    </el-form-item>

                                    <el-form-item label="营业执照" prop="name">
                                        <div class="demo-image">
                                            <div class="block" v-for="fit in fits" :key="fit">
                                                <span class="demonstration"></span>
                                                <el-image
                                                style="width: 100px; height: 100px"
                                                :src="url"
                                                :fit="fit"></el-image>
                                            </div>
                                        </div>
                                    </el-form-item>

                                </el-form>
                                <span slot="footer" class="dialog-footer">
                                    <el-button @click="xiangqing=false">取 消</el-button>
                                    <el-button type="primary" @click="xiangqing=false">确 定</el-button>
                                </span>
                        </el-dialog>
                </div>
                <!-- 编辑功能 -->
                <div>
                    <el-dialog
                        title="提示"
                        :visible.sync="xiangqing1"
                            width="60%">
                            <el-form :model="xiangqingForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm" label-suffix=":">
                                <el-form-item label="供应商名称" prop="name">
                                    <el-input  v-model="xiangqingForm.distributor_name" ></el-input>
                                </el-form-item>
                                <el-form-item label="供应商负责人" prop="name">
                                    <el-input  v-model="xiangqingForm.distributor_principal"></el-input>
                                </el-form-item>
                                <el-form-item label="负责人电话" prop="name">
                                    <el-input  v-model="xiangqingForm.distributor_phone"></el-input>
                                </el-form-item>

                                <el-form-item label="法人代表" prop="name">
                                    <el-input  v-model="xiangqingForm.distributor_legal_person"></el-input>
                                </el-form-item>

                                <el-form-item label="法人电话" prop="name">
                                    <el-input  v-model="xiangqingForm.distributor_legal_phone"></el-input>
                                </el-form-item>

                                <el-form-item label="供应商地址" prop="name">
                                    <el-input  v-model="xiangqingForm.distributor_map"></el-input>
                                </el-form-item>

                                <el-form-item label="营业执照" prop="name">
                                    <div class="demo-image">
                                        <div class="block" v-for="fit in fits" :key="fit">
                                            <span class="demonstration"></span>
                                            <el-image
                                            style="width: 100px; height: 100px"
                                            :src="url"
                                            :fit="fit"></el-image>
                                        </div>
                                    </div>
                                </el-form-item>

                            </el-form>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="xiangqing1=false">取 消</el-button>
                                <el-button type="primary" @click="updateBtn">确 定</el-button>
                            </span>
                    </el-dialog>
                </div>
                <div>
                    <el-dialog
                        title="提示"
                        :visible.sync="xinzengMassge"
                        width="30%">
                        <span style="font-size:15px">当前地区已有供应商无法新增 
                            ,如有问题请联系市区管理员</span>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="xinzengMassge = false">取 消</el-button>
                            <el-button type="primary" @click="xinzengMassge = false">确 定</el-button>
                        </span>
                        </el-dialog>
                </div>
            </div>
   </div>
</template>
<script>
import axios from 'axios'
export default {
  data(){
    return{
         addRoleForm:{
              admin_id:'',
              admin_name:'',
              admin_pwd:'',
              area_code:'',
              area_name:'',
              distributor_name:'',         
              distributor_legal_person:'',    
              distributor_business_license:'',
              distributor_principal:'',
              distributor_phone:'',    
              distributor_legal_phone:'',     
              distributor_map:'' ,          
              
        },
        clinicTable:{

        },
        visibleCancel:'',
        roleTable:[],
        roleTable1:[],
        dialogVisible:false,
        roles:[],
        regin:[],
        street:[],
        clinicVisible:false,
        adminId:'',
        dialogVisible1:false,
        biaoshi:false,
        fileList:[],
        fits: ['fill'],
        url: 'https://madlife.oss-cn-chengdu.aliyuncs.com/%E7%AE%80%E5%8C%BB/2020/09/27/16011710860932677.png',
        xiangqing:false,
        xiangqingForm:{},
        xinzengMassge:false,
        xiangqing1:false
    }
  },
  methods:{
    initAdmin(){
        var userInfo=JSON.parse(sessionStorage.getItem("userInfo"));
         // 获取所有用户信息
        axios.get("http://localhost/distributor/findDistributor?roleId="+userInfo.role_id+"&areaCode="+userInfo.area_code)
        .then((r)=>{
            if(r.data.code===200){
                this.roleTable=r.data.data;
            }else{
                this.roleTable=[];
            }
            
        });
    },
    // 全局定义响应消息
    initMessge(r){
        if(r.data.code===200){
                this.$message({
                message: r.data.msg,
                type: 'success'
                });
                this.initAdmin();
            }else{
                this.$message.error('很抱歉，'+r.data.msg+'，请重试');
        }
    },
    // 全局定义还没被关联的诊所 方便调用
    initClinic(){
        var userInfo=JSON.parse(sessionStorage.getItem("userInfo"));
        axios.get("http://localhost/Comm/findClinicNotBinding/"+userInfo.area_code)
        .then((r)=>{
           if(r.data.code===200){
                this.roleTable1=r.data.data;
           }else{
               this.roleTable1=[];
           }
           
        })
    },
        //确定按钮触发事件
    insertAdmin(){
        var userInfo=JSON.parse(sessionStorage.getItem("userInfo"));
        this.addRoleForm.admin_id=userInfo.admin_id;
        axios.post("http://localhost/distributor/insertDistributor",this.addRoleForm)
        .then(r=>{
            if(r.data.code===200){
                this.dialogVisible=false;
                 this.$message({
                message: '添加成功',
                type: 'success'
                });
                this.addRoleForm={};
                this.initAdmin();
            }
        });
    },
    // 修改状态
    stateClick(scope){
        console.log("当前行",scope);
        axios.post("http://localhost/distributor/updateDistributor",scope)
        .then(r=>{
           this.initMessge(r);
        });
    },
    //开启诊所
    clinicOpen(){
      var userInfo=JSON.parse(sessionStorage.getItem("userInfo"));
      axios.get("http://localhost/distributor/isnotDistributor?areaCode="+userInfo.area_code)
      .then(r=>{
          if(r.data.code===200){
                this.xinzengMassge=true;
          }else{
                this.dialogVisible=true;
          }
      })
      
    },
    //  区县触发事件
    reginById(reginId){
        axios.get("http://localhost/RegionController/"+reginId)
        .then((r)=>{
           this.addRoleForm.area_name=r.data.data[0].region_name;
           this.street=r.data.data;
        })
        this.countiesId=reginId;
    }
    ,
    // 关联诊所按钮
    bindingClinic(score){
        
        axios.get("http://localhost/distributor/findDistributorById?distributorById="+score)
        .then((r)=>{
           console.log(r);
           if(r.data.code===200){
                this.xiangqingForm=r.data.data;
                this.xiangqing=true;
           }else{
                this.xiangqing=false;
           }
           
        })
        
        
    },
    // 删除用户按钮
    deleteAdmin(scope){
         axios.get("http://localhost/distributor/deleteDistributor?distributorId="+scope.distributor_id+"&adminId="+scope.admin_id)
        .then((r)=>{
           this.initMessge(r);
        })
    },
    // 关联操作
    guanlian(scope){
         axios.get("http://localhost/Comm/clinicAdmin",{
             params:{
                 adminId:this.adminId,
                 communityHospitalsId:scope.community_hospitals_id
             }
         })
        .then((r)=>{
            this.initMessge(r);
            if(r.data.code==200){
                this.initClinic();
            }else{
                
            }
        })
    },
    // 有无诊所信息提示框 确定按钮
    queding(){
        this.dialogVisible1=false;
    },
    // 修改信息
    updateDistributor1(scope){
        axios.get("http://localhost/distributor/findDistributorById?distributorById="+scope)
        .then((r)=>{
           if(r.data.code===200){
                this.xiangqingForm=r.data.data;
                this.xiangqing1=true;
           }else{
                this.xiangqing1=false;
           }
           
        })
    },
    // 修改确定按钮
    updateBtn(){
        alert(1);
        axios.post("http://localhost/distributor/updateDistributor",this.xiangqingForm)
        .then(r=>{
           if(r.data.code===200){
               
               this.insertAdmin(r);

           }else{
                this.$message.error('修改失败');
           }
        });
    }
  },
  mounted(){
        var userInfo=JSON.parse(sessionStorage.getItem("userInfo"));
        // 获取所有角色
        axios.get("http://localhost/Role/countyRole")
        .then((r)=>{
            
            this.roles=r.data.data;
        });
        // 获取地区
        axios.get("http://localhost/RegionController/findCounty?area_code="+userInfo.area_code)
        .then((r)=>{
          
            this.regin=r.data.data;
        });
        // 获取所有供应商信息
        axios.get("http://localhost/distributor/findDistributor?roleId="+userInfo.role_id+"&areaCode="+userInfo.area_code)
        .then((r)=>{

            if(r.data.code===200){
                
                this.roleTable=r.data.data;
            }
            
        });
  }
}
</script>
<style scoped>
/* 外边距的顺序: 上 左 下 右 */
.caidanming {
  margin: 10px 0px 10px 10px;
}
.title {
  font-size: 30px;
  margin-top: 20px;
  font-weight: bold;
  margin: 20px 50px 25px 10px;
}

</style>
